import React from "react";
import { useNavigate } from "react-router-dom";
import "./home.articleitem.less";

export default function ArticleItem(props) {
  const { title, cover, aut_name, comm_count, pubdate } = props.info;

  const ImgPic = () => {
    if (cover.type) {
      return cover.images.map((item) => <img src={item} alt="" key={item} />);
    } else {
      return <></>;
    }
  };

  // 日期格式处理，计算相差天数
  const date = new Date(pubdate);
  const nowDate = new Date();
  let days = Math.floor((nowDate - date) / (24 * 60 * 60 * 1000));
  if (days === 0) {
    days = "刚刚";
  } else if (days < 7) {
    days += "天前";
  } else {
    days =
      date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
  }

  // 跳转详情页
  const navigate = useNavigate();
  const toDetail = () => {
    navigate("/detail/" + props.info.art_id);
  };

  return (
    <div className="article-item" onClick={toDetail}>
      <h4>{title}</h4>
      <div className="pic-box">
        <ImgPic />
      </div>
      <div className="info">
        <span>{aut_name}</span>
        <span>{comm_count}评论</span>
        <span>{days}</span>
      </div>
    </div>
  );
}
